<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HarmonyOS 列表组件示例</title>
  <link rel="stylesheet" href="../dist/harmony-style.css">
  <link rel="stylesheet" href="common-styles.css">
</head>
<body>
  <div class="container">
    <h1 class="title title-large">列表组件示例</h1>
    
    <!-- 基础列表 -->
    <div class="example-section">
      <h2 class="example-section-title">基础列表</h2>
      <ul class="list">
        <li class="list-item">
          <div class="list-item-content">
            <h3 class="list-item-title">列表项标题</h3>
            <p class="list-item-description">这是列表项的描述文本</p>
          </div>
        </li>
        <li class="list-item">
          <div class="list-item-content">
            <h3 class="list-item-title">列表项标题</h3>
            <p class="list-item-description">这是列表项的描述文本</p>
          </div>
        </li>
        <li class="list-item">
          <div class="list-item-content">
            <h3 class="list-item-title">列表项标题</h3>
            <p class="list-item-description">这是列表项的描述文本</p>
          </div>
        </li>
      </ul>
    </div>
    
    <!-- 带图标的列表 -->
    <div class="example-section">
      <h2 class="example-section-title">带图标的列表</h2>
      <ul class="list">
        <li class="list-item">
          <svg class="list-item-icon" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
          </svg>
          <div class="list-item-content">
            <h3 class="list-item-title">消息</h3>
            <p class="list-item-description">查看您的消息</p>
          </div>
        </li>
        <li class="list-item">
          <svg class="list-item-icon" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
          </svg>
          <div class="list-item-content">
            <h3 class="list-item-title">收藏</h3>
            <p class="list-item-description">查看收藏内容</p>
          </div>
        </li>
        <li class="list-item">
          <svg class="list-item-icon" viewBox="0 0 24 24" fill="currentColor">
            <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/>
          </svg>
          <div class="list-item-content">
            <h3 class="list-item-title">设置</h3>
            <p class="list-item-description">系统设置选项</p>
          </div>
        </li>
      </ul>
    </div>
    
    <!-- 带头像的列表 -->
    <div class="example-section">
      <h2 class="example-section-title">带头像的列表</h2>
      <ul class="list">
        <li class="list-item">
          <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle fill='%230A59F7' cx='20' cy='20' r='20'/%3E%3Ctext fill='white' font-size='20' x='50%25' y='50%25' text-anchor='middle' dy='.3em'%3EA%3C/text%3E%3C/svg%3E" 
               alt="Avatar" class="list-item-avatar">
          <div class="list-item-content">
            <h3 class="list-item-title">张三</h3>
            <p class="list-item-description">这是用户描述信息</p>
          </div>
        </li>
        <li class="list-item">
          <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle fill='%2364bb5c' cx='20' cy='20' r='20'/%3E%3Ctext fill='white' font-size='20' x='50%25' y='50%25' text-anchor='middle' dy='.3em'%3EB%3C/text%3E%3C/svg%3E" 
               alt="Avatar" class="list-item-avatar">
          <div class="list-item-content">
            <h3 class="list-item-title">李四</h3>
            <p class="list-item-description">这是用户描述信息</p>
          </div>
        </li>
        <li class="list-item">
          <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle fill='%23ed6f21' cx='20' cy='20' r='20'/%3E%3Ctext fill='white' font-size='20' x='50%25' y='50%25' text-anchor='middle' dy='.3em'%3EC%3C/text%3E%3C/svg%3E" 
               alt="Avatar" class="list-item-avatar">
          <div class="list-item-content">
            <h3 class="list-item-title">王五</h3>
            <p class="list-item-description">这是用户描述信息</p>
          </div>
        </li>
      </ul>
    </div>
    
    <!-- 带操作的列表 -->
    <div class="example-section">
      <h2 class="example-section-title">带操作的列表</h2>
      <ul class="list">
        <li class="list-item">
          <div class="list-item-content">
            <h3 class="list-item-title">列表项标题</h3>
            <p class="list-item-description">带有操作按钮的列表项</p>
          </div>
          <div class="list-item-action">
            <svg class="list-item-icon" viewBox="0 0 24 24" fill="currentColor">
              <path d="M3 18h18v-2H3v2zM3 6v2h18V6H3zm0 7h18v-2H3v2z"/>
            </svg>
          </div>
        </li>
        <li class="list-item">
          <div class="list-item-content">
            <h3 class="list-item-title">列表项标题</h3>
            <p class="list-item-description">带有操作按钮的列表项</p>
          </div>
          <div class="list-item-action">
            <svg class="list-item-icon" viewBox="0 0 24 24" fill="currentColor">
              <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
            </svg>
          </div>
        </li>
      </ul>
    </div>
    
    <!-- 列表状态 -->
    <div class="example-section">
      <h2 class="example-section-title">列表状态</h2>
      <ul class="list">
        <li class="list-item selected">
          <div class="list-item-content">
            <h3 class="list-item-title">选中状态</h3>
            <p class="list-item-description">当前选中的列表项</p>
          </div>
        </li>
        <li class="list-item active">
          <div class="list-item-content">
            <h3 class="list-item-title">激活状态</h3>
            <p class="list-item-description">当前激活的列表项</p>
          </div>
        </li>
        <li class="list-item disabled">
          <div class="list-item-content">
            <h3 class="list-item-title">禁用状态</h3>
            <p class="list-item-description">禁用的列表项</p>
          </div>
        </li>
      </ul>
    </div>
    
    <!-- 列表尺寸 -->
    <div class="example-section">
      <h2 class="example-section-title">列表尺寸</h2>
      
      <h3 class="title title-sub-medium mb-medium">大尺寸</h3>
      <ul class="list">
        <li class="list-item list-item-large">
          <div class="list-item-content">
            <h3 class="list-item-title">大尺寸列表项</h3>
            <p class="list-item-description">描述文本</p>
          </div>
        </li>
      </ul>
      
      <h3 class="title title-sub-medium mb-medium mt-large">默认尺寸</h3>
      <ul class="list">
        <li class="list-item">
          <div class="list-item-content">
            <h3 class="list-item-title">默认尺寸列表项</h3>
            <p class="list-item-description">描述文本</p>
          </div>
        </li>
      </ul>
      
      <h3 class="title title-sub-medium mb-medium mt-large">小尺寸</h3>
      <ul class="list">
        <li class="list-item list-item-small">
          <div class="list-item-content">
            <h3 class="list-item-title">小尺寸列表项</h3>
            <p class="list-item-description">描述文本</p>
          </div>
        </li>
      </ul>
    </div>
    
    <!-- 列表样式 -->
    <div class="example-section">
      <h2 class="example-section-title">列表样式</h2>
      
      <h3 class="title title-sub-medium mb-medium">分割线列表</h3>
      <ul class="list divided">
        <li class="list-item">
          <div class="list-item-content">
            <h3 class="list-item-title">列表项 1</h3>
          </div>
        </li>
        <li class="list-item">
          <div class="list-item-content">
            <h3 class="list-item-title">列表项 2</h3>
          </div>
        </li>
        <li class="list-item">
          <div class="list-item-content">
            <h3 class="list-item-title">列表项 3</h3>
          </div>
        </li>
      </ul>
      
      <h3 class="title title-sub-medium mb-medium mt-large">带边框列表</h3>
      <ul class="list bordered">
        <li class="list-item">
          <div class="list-item-content">
            <h3 class="list-item-title">列表项 1</h3>
          </div>
        </li>
        <li class="list-item">
          <div class="list-item-content">
            <h3 class="list-item-title">列表项 2</h3>
          </div>
        </li>
      </ul>
      
      <h3 class="title title-sub-medium mb-medium mt-large">圆角列表</h3>
      <ul class="list rounded">
        <li class="list-item">
          <div class="list-item-content">
            <h3 class="list-item-title">列表项 1</h3>
          </div>
        </li>
        <li class="list-item">
          <div class="list-item-content">
            <h3 class="list-item-title">列表项 2</h3>
          </div>
        </li>
      </ul>
    </div>
    
    <!-- 分组列表 -->
    <div class="example-section">
      <h2 class="example-section-title">分组列表</h2>
      
      <div class="list-group-title">A组</div>
      <ul class="list">
        <li class="list-item">
          <div class="list-item-content">
            <h3 class="list-item-title">项目 A1</h3>
          </div>
        </li>
        <li class="list-item">
          <div class="list-item-content">
            <h3 class="list-item-title">项目 A2</h3>
          </div>
        </li>
      </ul>
      
      <div class="list-group-title">B组</div>
      <ul class="list">
        <li class="list-item">
          <div class="list-item-content">
            <h3 class="list-item-title">项目 B1</h3>
          </div>
        </li>
        <li class="list-item">
          <div class="list-item-content">
            <h3 class="list-item-title">项目 B2</h3>
          </div>
        </li>
      </ul>
    </div>
  </div>
</body>
</html>

